<template>
	<view class="eBook">
		<view class="lie">
					<view class="content" v-for="(item,index) in list" :key="index" @click="godetails(item.id)">
						<div class="left">
							<img :src="item.cover" alt="" srcset="" v-if="item.cover==''?false:true">
							<img v-else src="/static/logo.png" alt="">
						</div>
						<div class="right">	
							<div class="right-top">{{item.title}}</div>
							<div class="bottom">
								<span >￥{{item.price}}</span>
								<span>￥{{item.t_price}}</span>
								<span>{{item.sub_count}}人订阅➡</span>
							</div>
						</div>
			   </view>
		</view>
	</view>
</template>

<script>
	import {getbook} from '../request/index.js'
	export default {
		data() {
			return {
				query:{
					page:1,
					limit:10
				},
				list:[]
			};
		},
		onLoad() {
			getbook(this.query).then(res=>{
				this.list=res.data.data.rows
				console.log(this.list);
			})
		},
		methods:{
			godetails(id){
				uni.navigateTo({
					url:`/pages/bookDetail/bookDetail?id=${id}`
				})
			},
			getlist(){
				getbook(this.query).then(res=>{
					this.list=res.data.data.rows
					console.log(this.list);
				})
			},
			onReachBottom(){
				this.query.page++
				this.getlist()
				console.log(11111);
			},
			onPullDownRefresh(){
				this.query.page=1
				this.getlist()
				setTimeout(() => {
				       //结束下拉刷新
				     uni.stopPullDownRefresh ();
				   }, 1000);
				console.log(22222);
			}
		}
	}
</script>

<style lang="scss">
.eBook{
	width: 100%;
	height: 100%;
	.lie{
		width: 100%;
		.top{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			line-height: 50px;
			padding:  10px;
			.left{
				font-weight: 800;
			}
			.right{
				font-size: 16px;
			}
		}
		.content{
			width: 100%;
			height: 115px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			.left{
				flex: 4;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.right{
				flex: 6;
				.bottom{
					span:nth-child(1){
						color: red;
						font-size: 20px;
					}
					span:nth-child(2){
						font-size: 16px;
					}
				}
			}
			
		}
	}
}
</style>
